<template>
  <view
    class="cu-form-group"
    style="border-radius: 10px; position: absolute; right: 10rpx"
  >
    <!-- <view class="title">{{label}}</view> -->
    <picker
      @change="PickerChange"
      :value="index"
      :range-key="rangeKey"
      :range="dictOptions"
      :disabled="disabled"
    >
      <view class="picker" style="color: inherit; float: left; width: 100%">
        {{ index > -1 ? dictOptions[index][rangeKey] : "请选择" }}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  name: "MySelect",
  props: {
    dictCode: String,
    value: [String, Number],
    disabled: {
      type: Boolean,
      default: false,
    },
    label: String,
    rangeKey: {
      type: String,
      default: "label",
    },
    valueKey: {
      type: String,
      default: "value",
    },
    searchUrl: String,
    defaultParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    itemRender: {
      type: Function,
      default: (item) => {
        return item;
      },
    },
  },
  watch: {
    dictCode: {
      immediate: true,
      handler() {
        this.initDictData();
      },
    },
  },
  computed: {},
  data() {
    return {
      dictOptions: [],
      index: -1,
    };
  },
  methods: {
    initDictData() {
      //根据字典Code, 初始化字典数组
      if (this.searchUrl) {
        this.$http
          .get(this.searchUrl, {
            params: {
              ...this.defaultParams,
            },
          })
          .then((res) => {
            if (res.data.success) {
              const data = res?.data?.result?.records || [];
              this.dictOptions = data?.map((item) => this.itemRender(item));
              this.getIndex();
            }
          });
      } else {
        let code = this.dictCode;
        this.$http.get(`/sys/dict/getDictItems/${code}`).then((res) => {
          console.log("my-select-nn", res);
          if (res.data.success) {
            this.dictOptions = res.data.result;
            this.getIndex();
          }
        });
      }
      console.log("this.dictOptions", this.dictOptions);
    },
    PickerChange(e) {
      this.index = e.detail.value;
      console.log("my-select-index", e.detail.value);
      if (this.index == -1) {
        this.index = 0;
        this.$emit("input", this.dictOptions[0][this.valueKey]);
      } else {
        this.$emit("input", this.dictOptions[this.index][this.valueKey]);
      }
    },
    getIndex() {
      for (var i = 0; i < this.dictOptions.length; i++) {
        if (this.dictOptions[i]?.[this.valueKey] == this.value) {
          this.index = i;
          return;
        }
      }
      this.index = -1;
    },
  },
};
</script>

<style>
.cu-form-group {
  background-color: #ffffff;
  line-height: 15px;
  padding: 0.5px 15px;
  display: flex;
  align-items: center;
  min-height: 40px;
  justify-content: space-between;
}

.cu-form-group uni-picker .picker {
  line-height: 15px;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: right;
}

.cu-form-group uni-picker::after {
  font-family: cuIcon;
  line-height: 15px;
  display: block;
  content: "\e6a3";
  position: absolute;
  font-size: 12px;
  color: #8799a3;
  width: 31px;
  text-align: center;
  top: 0;
  bottom: 0;
  right: -10rpx;
  margin: auto;
}
</style>
